<template>
  <view class="bottom">
    <view class="logo-box">
      <image
          :src="$kt.file.byPath('image/logo.svg')"
          mode="aspectFill"
          class="logo"
      ></image>
    </view>

    <view>
      <login-operate-box></login-operate-box>
    </view>

    <view style="height: 30rpx"></view>

    <kt-keyboard-size
        ref="keyboardSize"
        @show="focus"
        @hide="blur"
    ></kt-keyboard-size>
  </view>
</template>

<script>
import KtKeyboardSize from "../../kt-keyboard-size/kt-keyboard-size.vue";
import LoginAgreement from "./LoginAgreement.vue";
import LoginOperateBox from "./LoginOperateBox.vue";
export default {
  components: {
    LoginAgreement,
    KtKeyboardSize,
    LoginOperateBox,
  },
  data() {
    return {};
  }
}
</script>

<style lang="scss" scoped>
.bottom{
  width: 100%;
  padding: 10px 20px 0 20px;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 20rpx 20rpx 0 0;
  box-shadow: 0 0 20rpx 0 rgba(118,118,118,0.1);
}

.title{
  font-size: 30rpx;
  text-align: center;
  //color: rgba(0,110,109,1);
  color: #000;
  line-height: 40rpx;
  font-weight: bold;
  margin: 10rpx;
}

.other-box{
  margin-top: 20rpx;
  width: 100%;
  text-align: center;
  .other-title{
    font-size: 24rpx;
    color: #666666;
  }
  .other-icon-box{
    display: inline-block;
    width: 100%;
    text-align: center;
    margin-top: 20rpx;
    .icon{
      width: 80rpx;
      height: 80rpx;
    }
  }
}

.logo-box{
  text-align: center;
  width: 100%;
}

.logo{
  display: inline-block;
  width: 200rpx;
  height: 100rpx;
  margin: 0 auto;
}
</style>
